<template>
<div>
    <div style="display: flex; justify-content: center; align-items: center;
            height:380px;width:1200px;margin: 0 auto;padding: 5px">
        <el-card style="width: 20%;height: 320px;margin:0 5px 0 5px;position:relative; cursor: pointer" @click="goToChat()">
            <a  @click="goToChat()">
                <img src="/img/index1.jpg" style="width: 100%;position:absolute;z-index:0">
                <div style="position: absolute;float: left;z-index:5;margin: 20px 0 0 20px;">
                    <p style="font: 25px '微软雅黑 Light';margin: 5px 0 5px 0">问医生</p>
                    <p style="font: 12px '微软雅黑 Light';margin-left: 1px">三甲主治在线</p>
                </div>
            </a>


        </el-card>

        <el-card style="width: 20%;height: 320px;margin:0 5px 0 5px;position:relative;"  v-for="(indexCard,i) in indexCard">
            <a :href="indexCard.url" style="color: #000">
                <img :src="indexCard.imgUrl" style="width: 100%;position:absolute;z-index:0">
                <div style="position: absolute;float: left;z-index:5;margin: 20px 0 0 20px;">
                    <p style="font: 25px '微软雅黑 Light';margin: 5px 0 5px 0">{{indexCard.title}}</p>
                    <p style="font: 12px '微软雅黑 Light';margin-left: 1px">{{indexCard.desc}}</p>
                </div>
            </a>

        </el-card>
    </div>

    <!--轮播图-->
    <div style="width: 1200px;margin: 50px auto;">
        <el-carousel :interval="3000" height="350px">
            <el-carousel-item v-for="item in 3">
            <!--TODO 修改轮播图为数据库中的数据的链接 bannerController-->
                <img :src="'/img/indexbanner'+item+'.jpg'" width="100%" height="100%">
            </el-carousel-item>
        </el-carousel>
    </div>
</div>
</template>
<style>
body{
    background-image: url("../assets/background_index.png");
}
</style>
<script>
import BaseUrl from "@/http/BaseUrl";
import SimpleAxios from "@/http/SimpleAxios";
import TokenAxios from "@/http/TokenAxios";

let socket;
export default {
    data(){
        return{
            loginInfo:[],
            dep:[],
            indexCard:[
/*                {
                  "url":"/consult",
                  "title": "问医生",
                  "desc":"三甲主治在线",
                  "imgUrl":"/img/index1.jpg"
                },*/
                {
                    "url":"/vaccine",
                    "title": "查疫苗",
                    "desc":"疫苗接种与禁忌",
                    "imgUrl":"/img/index2.jpg"
                },
                {
                    "url":"/encyclopedia",
                    "title": "医学百科",
                    "desc":"专业医生文章论坛",
                    "imgUrl":"/img/index3.jpg"
                },
                {
                    "url":"/aid",
                    "title": "急救指南",
                    "desc":"急救知识百科查询",
                    "imgUrl":"/img/index4.jpg"
                },
                {
                    "url":"/video",
                    "title": "科普视频",
                    "desc":"专业科普视频",
                    "imgUrl":"/img/index5.jpg"
                }
            ]
        }
    },
    methods:{
        loadCurrentLoginInfo(){
            this.loginInfo=JSON.parse(localStorage.getItem('loginInfo'));
            // let socketUrl = "ws://192.168.88.130:29800/imserver/" + username+"?depId="+department;
            // socket =new WebSocket(socketUrl);
            if (this.loginInfo.role===3||this.loginInfo.role===4){
                this.getDep();
            }
            console.log(this.loginInfo)
        },
        goToChat(){
            if (this.loginInfo){
                switch (this.loginInfo.role){
                    case 1:
                        location.href='/personal/user/info';
                        break;
                    case 2:
                        location.href='/consult';
                        break;
                    case 3:
                        location.href='/personal/doc/credential';
                        break;
                    case 4:
                        location.href='/consult/chat?depId='+this.dep[0].department;
                        break;
                }
            }else{
                this.$router.push('/login/user')
            }

        },
        getDep(){
            let url=BaseUrl.CHAT+'/chat/getDep';
            console.log(url);

            TokenAxios.get(url).then((response)=>{
                // if (response.data.state===20000){
                this.dep=response.data.data;
                console.log(this.dep[0].department)
                // }
            })


        }


    },
    created() {
    },
    mounted() {
        this.loadCurrentLoginInfo();
    }
}
</script>
